<template>
  <div class="registerEdit">
    <div class="top_title">
      <div class="top_title_back" @click="onClickLeft"><i class="iconfont icon-back"></i></div>
      <div class="top_title_val">
        {{ $route.meta.title }}
      </div>
      <div v-show='!isDetail && !dataSource.billId' class="top_title_right" @click="onClickRight">
        保存草稿
      </div>
      <div v-show="isDetail && dataSource.billId && dataSource.billStatus=='保存'" class="top_title_right"
           @click="openFollow()">
        跟进登记
      </div>
    </div>
    <van-tabs v-if="showTabs" v-model="active" background="#3975c6" color="#F8F8F8" style="padding-top: 50px"
              @click="onTabClick">
      <van-tab title="服务信息">
      </van-tab>
      <van-tab title="跟进记录">
      </van-tab>
    </van-tabs>
    <div v-if="!showHistory" :style="fwxxCss" class="fwxx">
      <div class="formData">
        <van-form>
          <van-grid :border="false">
            <van-grid-item v-for="(item, index) in dataSource.files" :key="`image${index}`">
              <van-image :src="item.fileUrl" fit="cover" height='1.5rem' width='1.5rem'
                         @click='preImg(item.fileUrl)' />
            </van-grid-item>
            <!--                        <van-grid-item>
                       <van-image width='1.5rem'
                                  height='1.5rem' fit="cover" src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
                     </van-grid-item>
                     <van-grid-item>
                       <van-image width='1.5rem'
                                  height='1.5rem' fit="cover" src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
                     </van-grid-item>-->
          </van-grid>

          <van-field v-model="dataSource.createTime" input-align="right" label="登记时间" readonly required />
          <van-field v-model="dataSource.accidentAddress" autosize input-align="right" label="登记地点" readonly required
                     rows="1"
                     type="textarea" />
          <van-field v-if="showBillStatus" v-model="dataSource.billStatus" autosize input-align="right" label="单据状态" readonly
                     required rows="1"
                     type="textarea" />
          <div style='font-size: 14px;color: #606266;margin-left: 13px;height: 21px;
    line-height: 21px;'>{{ isDetail ? '' : '请完善以下信息' }}
          </div>
          <van-field v-model="dataSource.fixCenterName" input-align="right" is-link label="维修中心"
                     placeholder="请选择进场维修中心"
                     readonly required @click="handleSelect('fixCenterId', 'fixCenterName')" />
          <van-field v-model="dataSource.carNo" :disabled='isDetail' input-align="right" label="车牌号码"
                     placeholder="请输入车牌号码"
                     required @blur='doUseCarNo' />
          <van-field v-model="dataSource.ogPsnName" input-align="right" is-link label="外出服务人员"
                     placeholder="请选择"
                     readonly
                     required @click="showMultipleVisible = !isDetail" />
          <van-field v-model="dataSource.vinCode" input-align="right" is-link label="车架号" placeholder="请选择车辆"
                     readonly @click="carVisible = !isDetail" />
          <van-field v-model="dataSource.sceneServeTypeName" input-align="right" is-link label="现场服务类型"
                     placeholder="请选择" required
                     readonly @click="showSceneServeType = !isDetail" />
          <van-field label="现场服务事项" required v-if="!isDetail && dataSource.sceneServeType == '2' ">
            <!-- 使用右侧插槽插入复选框 -->
            <template #input>
              <van-radio-group v-model="dataSource.fieldServiceTypeNum" style="display: flex;flex-wrap: wrap" :disabled='isDetail'>
                <div v-for="(item) in fieldServiceTypeArray" class="sceneServeItem">
                  <van-radio :name="item.value" shape="square" style="font-size: 12px;margin-left: 0px">{{item.name}}</van-radio>
                </div>
              </van-radio-group>
            </template>
          </van-field>
          <van-field label="现场服务事项" v-model="dataSource.fieldServiceTypeName" input-align="right" required v-if="isDetail && dataSource.sceneServeTypeNum == '2'" readonly></van-field>
          <van-field v-model="dataSource.customerName" :disabled='isDetail' input-align="right" label="客户名"
                     placeholder="请输入客户名称" />
          <van-field v-model="dataSource.customerPhone" :disabled='isDetail' input-align="right"
                     label="联系电话"
                     placeholder="请输入联系电话" />
          <van-field v-model="dataSource.serverPersonName" input-align="right" is-link label="服务顾问"
                     placeholder="请选择"
                     readonly @click="handleSelect('serverPersonId', 'serverPersonName')" />
          <van-field input-align="right" label="是否生成工单"
                     readonly>
            <template #input>
              <span>{{ dataSource.createdRepair == 1 ? '是' : '否' }}</span>
            </template>
          </van-field>
          <van-field v-model="dataSource.accidentDate" clickable input-align="right" is-link label="出险时间"
                     placeholder="请选择"
                     readonly @click="showTimerPicker = !isDetail" />
          <van-field v-model="dataSource.note" :disabled='isDetail' autosize input-align="right" label="备注"
                     placeholder="请输入备注"
                     rows="1" type="textarea" />
        </van-form>

      </div>
      <div class="addBtn" style="padding-bottom: unset">
        <van-button v-show='!isDetail && !dataSource.billId && !$route.query.isList' round type="info"
                    @click="$router.push('/quickEdit?id=' + dataSource.id)">上一步
        </van-button>
        <van-button v-show='!isDetail' round type="info" @click="formOnSubmit" :loading="subLoading" loading-text="提交中..." >提交</van-button>
        <van-button v-show='isDetail && (dataSource.sceneServeTypeName=="事故服务" || dataSource.billStatus=="外服审核驳回")' round type="warning" @click="trackFailed">战败</van-button>
        <van-button v-show='isDetail && dataSource.billStatus=="外服审核驳回"' round type="info" @click='doEdit'>修改</van-button>
<!--        <van-button v-show='isDetail && dataSource.billStatus=="战败"' round type="info" @click='restartFollowUp(dataSource.billId)'>重启跟进</van-button>-->
<!--        <van-button v-show='isDetail && dataSource.createdRepair != 1 && !noEditInterShop.includes(dataSource.billStatus)' round type="info" @click="editOrg">修改入场门店</van-button>-->
        <van-button v-show='isDetail && (dataSource.billStatus != "外服审核" && dataSource.billStatus!="外服审核驳回")' round type="info" @click="onOpenActionSheet">数据修改</van-button>
      </div>
<!--      <div class="addBtn" v-show='(isDetail && dataSource.billStatus=="外服审核驳回")'>-->
<!--        <van-button style="width: 90%" round type="info" @click='sceneServeApprove(dataSource.billId)'>提交</van-button>-->
<!--      </div>-->

      <van-dialog v-model="show1" confirmButtonColor='#3975C6' confirmButtonText='知道了' title="提示">
        <div class='dialogBody'>
          <div class='messDiv warning'>
            当前车牌<span style='font-weight: bold;'>{{ dataSource.carNo
            }}</span>已存在未处理完成的事故跟踪登记单，当前状态：{{ existData.billStatus }}
          </div>
          <div class='messDiv'>登记入场维修中心：{{ existData.fixCenterName }}</div>
          <div class='messDiv'>登记时间：{{ existData.createTime }}</div>
          <div class='messDiv'>登记地点：{{ existData.accidentAddress }}</div>
          <div class='messDiv'>服务人员：{{ existData.ogPsnName }}</div>
          <div class='messDiv'>
            登记人：{{ existData.creatorName }}
            <i v-if='existData.cell' class="iconfont icon-tel" @click.stop="handleTel(existData.cell)"></i>
          </div>
          <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(obj, index) in existData.attach" :key="`attach${index}`">
              <van-image
                :src="`${baseUrl}/proxy/cam/file/download?attachId=${obj.attachId}&attachName=${obj.attachName}`"
                fit="cover" height='1.08rem'
                width='1.08rem'
                @click='preImg(`${baseUrl}/proxy/cam/file/download?attachId=${obj.attachId}&attachName=${obj.attachName}`)' />
            </van-grid-item>
            <!--          <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            </van-grid-item>
            <van-grid-item>
              <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
            </van-grid-item>-->
          </van-grid>
        </div>

      </van-dialog>

      <van-dialog v-model="show2" cancelButtonColor='#E51C23' cancelButtonText='确认使用' confirmButtonColor='#000000'
                  confirmButtonText='取消' showCancelButton @cancel='doUseCarNo'
                  @confirm="dataSource.carNo = ''">
        <div class='dialogBody'>
          <div style='line-height: 24px'>
            检测到图片中存在以下车牌，请核对后使用
          </div>

          <van-radio-group v-model="dataSource.carNo">
            <van-radio v-for='(item, index) in carNoList' :key='`carNo_${index}`' :name="item.carNo" shape="square">
              <div v-if="item.color == 'blue'" class='carNo'>
                {{ item.carNo }}
              </div>
              <div v-else class='carNo' style='
            background: linear-gradient(180deg, rgba(54,213,213,0) 0%,rgba(54,213,85,1) 100%);
            color: rgba(16,16,16,1);'>
                {{ item.carNo }}
              </div>
            </van-radio>
            <!--          <van-radio name="2" shape="square">
              <div class='carNo' style='padding: 1px 11px;
              background: linear-gradient(180deg, rgba(54,213,213,0) 0%,rgba(54,213,85,1) 100%);
              color: rgba(16,16,16,1);'>
                闽DF15666
              </div>
            </van-radio>-->
          </van-radio-group>

        </div>
      </van-dialog>

      <van-dialog v-model="show3" cancelButtonColor='#E51C23' cancelButtonText='确认使用' confirmButtonColor='#000000'
                  confirmButtonText='取消' showCancelButton @cancel="carSure">
        <div class='dialogBody'>
          <div style='line-height: 24px'>
            该车牌在系统中存在对应的车辆档案，请确认是正确
          </div>

          <van-radio-group v-model="radio2">
            <van-radio v-for='(item, index) in car_recordList' :key='`carNo_${index}`' :name="item" shape="square">
              <div>
                {{ item.vinCode }}
                <div style='color: rgba(187,187,187,1); font-size: 14px'>车型：{{ item.carModelNameName }}</div>
                <div style='color: rgba(187,187,187,1); font-size: 14px'>客户：{{ item.ctmNumName
                  }}；{{ item.ctmNumPhone }}
                </div>
              </div>
            </van-radio>
            <!--          <van-radio name="2" shape="square">
              <div>
                WP02056625654585
                <div style='color: rgba(187,187,187,1); font-size: 14px'>车型：MKZ</div>
                <div style='color: rgba(187,187,187,1); font-size: 14px'>客户：无尾熊；18850549146</div>
              </div>
            </van-radio>-->
          </van-radio-group>

        </div>
      </van-dialog>

      <van-popup v-model="showTimerPicker" position="bottom">
        <van-datetime-picker v-model="currentDate" :formatter="formatter" type="datetime"
                             @cancel="showTimerPicker = false" @confirm="onConfirm($event, 'accidentDate')" />
      </van-popup>

      <van-popup v-model="showSelectPicker" position="bottom">
        <van-field v-if="likeWhoField == 'fixCenterId' || likeWhoField == 'serverPersonId'" v-model="likeWho"
                   input-align="left"
                   label="模糊查询" name="模糊查询" placeholder="请输入模糊查询关键词" />
        <van-picker :columns='columns' show-toolbar value-key='name' @cancel='showSelectPicker = false'
                    @confirm='handleSelectConfirm' />
      </van-popup>

      <van-popup v-model="showSelectPicker1" position="bottom">
        <van-field v-model="likeWho"
                   input-align="left"
                   label="模糊查询" name="模糊查询" placeholder="请输入模糊查询关键词" />
        <van-picker :columns='columns' show-toolbar value-key='name' @cancel='showSelectPicker1 = false'
                    @confirm='handleSelectConfirm1' />
      </van-popup>

      <MultipleSelect :list="empList" :value="dataSource.ogPsnName"
                      :visible="showMultipleVisible"
                      @close="showMultipleVisible = false" @multipleSubmit="multipleSubmit"></MultipleSelect>
      <van-popup v-model="showSceneServeType" round position="bottom">
        <van-picker :columns='sceneServeTypeList' show-toolbar value-key='name' @cancel='showSceneServeType = false' @confirm="onConfirmSceneServeType"/>
      </van-popup>

      <!-- 车辆选择 -->
      <!-- <van-popup class="carPop" v-model="carVisible" position="right"> -->
      <CarList :fixCenterId="''" :visible="carVisible" @close="carVisible = false" @getCarData="getCarData"></CarList>
      <!-- </van-popup> -->

      <div v-if="loading" class="loading">
        <van-loading class="loadbox" color="#fff" size="40px" text-color="#fff"> 提交中，请稍等...</van-loading>
        <div class="mask"></div>
      </div>

      <div v-if="ocrLoading" class="loading">
        <van-loading class="loadbox" color="#fff" size="40px" text-color="#fff"> 车牌号识别中，请稍等...</van-loading>
        <div class="mask"></div>
      </div>

      <div v-if="carLoading" class="loading">
        <van-loading class="loadbox" color="#fff" size="40px" text-color="#fff"> 车辆信息获取中，请稍等...
        </van-loading>
        <div class="mask"></div>
      </div>
      <van-action-sheet
        v-model="showEditDataFlag"
        :actions="editDataActions"
        @select="onSelectBtnToEditData"
        cancel-text="取消"
        description="请选择"
        close-on-click-action
      />
      <van-popup v-model="editDataBtn" round position="bottom" :style="{ height: '50%' }">
        <div v-if="editDataType == 'carNo'">
          <van-field v-model="dataSource.carNo" disabled readonly input-align="right" label="车牌号码" />
          <van-field class="redLabel" v-model="newCarNo" input-align="right" label="正确车牌号码" placeholder="请输入正确车牌号码"/>
        </div>
        <div v-if="editDataType == 'sceneServe'">
          <van-field v-model="dataSource.sceneServeTypeName" input-align="right" disabled readonly label="当前服务类型"  />
          <van-field class="redLabel" v-model="newSceneServeTypeName" input-align="right" required is-link label="正确服务类型" readonly @click="editSceneServeTypeFlag = 'new';showSceneServeType = true"/>
          <van-field label="现场服务事项" required v-if="newSceneServeType == '2' ">
            <!-- 使用右侧插槽插入复选框 -->
            <template #input>
              <van-radio-group v-model="newFieldServiceType"  style="display: flex;flex-wrap: wrap">
                <div v-for="(item) in fieldServiceTypeArray" class="sceneServeItem">
                  <van-radio :name="item.value" shape="square" style="font-size: 12px;margin-left: 0">{{item.name}}</van-radio>
                </div>
              </van-radio-group>
            </template>
          </van-field>
        </div>
        <div style="position: fixed;bottom: 25px;width: 100%;text-align: center">
          <van-button round size="large" type="info" style="width: 90%" @click="configEditData">确认修改</van-button>
        </div>
      </van-popup>
    </div>
    <div v-else>
      <van-pull-refresh id="followId" v-model="followRefreshing" class="followListbox" @refresh="followOnRefresh">
        <van-list v-if="followHistoryList && followHistoryList.length != 0"
                  v-model="followLoading"
                  :finished="followFinished"
                  finished-text="没有更多了"
                  @load="getFollowUpRecord">
          <div class="followList">
            <div class="followInfo_content">
              <div v-for="(item, index) in followHistoryList" :key="index" :class="index == 0 ? 'active' : ''"
                   class="followInfo_item active">
                <div class="followInfo_top">
                  <div class="followInfo_circle"></div>
                  <div class="followInfo_name">
                    {{ item.followUpDate }}
                  </div>
                </div>
                <div class="followInfo_box">
                  <div class="followInfo_linebox">
                    <div class="followInfo_line"></div>
                  </div>
                  <div class="followInfo_val">
                    <div class="followInfo_val_item">
                      <div class="item_label">跟进人员：</div>
                      <div class="item_val">{{ item.followUpPsnName ? item.followUpPsnName : '-' }}</div>
                    </div>

                    <div class="followInfo_val_item2">
                      <div class="item_label">跟进备注：</div>
                      <div class="item_val">{{ item.followUpRemark ? item.followUpRemark : '-' }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-list>
        <div v-else class="no_icon pt80">
          <img class="no_icon_img" src="@/assets/images/no_icon.png" />
          <div class="no_icon_txt">暂无数据</div>
        </div>
      </van-pull-refresh>

    </div>

    <van-popup
      v-model="show4"
      :round="true"
      :style="{ height: '60%' }"
      close-icon="close"
      position="bottom">
      <div class="followInfo">
        <div class="followInfobox">
          <div class="followInfo_title">跟进信息登记</div>
        </div>

        <div class="followInfo_content">
          <div class="followInfo_name">
            <div class="name">跟进人员：{{ followForm.username }}</div>
          </div>
          <div class="followInfo_item_time">
            <div class="card_label">
              <div class="require_icon">*</div>
              <div class="label_txt">跟进时间：</div>
            </div>
            <div class="card_select">
              <div class="select_time">
                <div class="time_val">{{ followForm.followUpDate }}</div>
              </div>
            </div>
          </div>

          <div class="voice_div">
            <div class="radiobox">
              <div class="">
                <div class="card_label">
                  <div class="require_icon">*</div>
                  <div class="label_txt">
                    <div>跟进备注：</div>
                    <div
                      class="voice_icon"
                      @click="clickRecord()"
                    ><img
                      class="voice_icon_img"
                      src="@/assets/images/voice_icon.png"
                    />语音录入
                    </div>
                  </div>
                </div>
                <div class="card_select">
                  <div class="select_time">
                    <textarea
                      v-model="followForm.followUpRemark"
                      class="text_val"
                      placeholder="请输入备注内容"
                      rows="5"
                    ></textarea>
                  </div>
                </div>
              </div>
            </div>
            <Voice
              :record-box="recordBox"
              @changeRecordBox="closeRecord"
              @translateResult="getWords"
            />
          </div>
        </div>
        <div style="text-align: center;padding: 10px 10px 20px 10px">
          <van-button round style="width: 100%" type="info" @click="configFollowForm()">确定</van-button>
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
import repairApi from '@/api/repairApi'
import commonApi from '@/api/commonApi'
import outApi from '@/api/outAPi'
import carApi from '@/api/carApi'
import MultipleSelect from '../../components/MultipleSelect/index.vue'
import { Dialog, ImagePreview, Notify, Toast } from 'vant'
import CarList from '../../pages/car/index'

import { getCookies, isPhone } from '@/utils/util.js'
import SelectRadio from '../../pages/taskCenter/components/SelectRadio.vue'
import Voice from '../../pages/taskCenter/voice.vue'
import SelectInput from '../../pages/taskCenter/components/SelectInput.vue'
import SelectTime from '../../pages/taskCenter/components/SelectTime.vue'

let failId = ''

const base_url = process.env.BASE_API
export default {
  name: 'registerEdit',
  components: {
    SelectTime, SelectInput, Voice, SelectRadio,
    MultipleSelect,
    CarList
  },
  data() {
    return {
      baseUrl: base_url,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      radio2: '1',
      isDetail: true,
      existData: {},
      dataSource: {
        // files: []
        // id: '',
        // accidentDate: getCurrentDetailTime(),
        // accidentAddress: '厦门市集美区集美北大道华侨大学北门',
        // latitude: 24.496074,
        // longitude: 118.202965,
        // id: '',
        // accidentDate: '',
        // accidentAddress: '',
      },
      loading: false,
      ocrLoading: false,
      carLoading: false,
      columns: [],
      field: '',
      fieldName: '',
      fixCenterList: [],
      serverPersonList: [],
      empList: [],
      carNoList: [],
      car_recordList: [],
      likeWho: '',
      likeWhoField: '',
      userId: getCookies('userId'),
      userInfo: JSON.parse(getCookies('userInfo')),

      showMultipleVisible: false,
      showSceneServeType: false,
      showSelectPicker: false,
      showSelectPicker1: false,
      showTimerPicker: false,
      carVisible: false,
      currentDate: new Date(),
      requestParams: {
        codeNo: '', //车架号或者车牌号，String，必填
        pageNo: 1 //当前页数，默认从1开始，每页显示十条，int，不能为空或者小于1
      },
      followForm: {
        username: JSON.parse(getCookies('userInfo')).kdusername,
        carAccTrackId: '',
        followUpPsn: JSON.parse(getCookies('userInfo')).kdpersonid,
        followUpRemark: '',
        followUpDate: ''
      },
      active: 0,
      followRefreshing: false,
      followLoading: false,
      followFinished: false,
      followHistoryList: [],

      recordBox: false,
      showBillStatus: false,
      showTabs: false,
      showHistory: false,
      sceneServeTypeList: [],
      noEditInterShop: ['关闭','战败','战败审核','外服审核驳回','外服审核'],
      //   数据修改
      showEditDataFlag: false,
      editSceneServeTypeFlag: '',
      fieldServiceTypeArray: [],
      fieldServiceTypeNumName: '',
      actions: [
        { name: '修改车牌号码' },
        { name: '修改服务类型' },
        { name: '修改进场门店' },
        { name: '重启跟进' },
      ],

      editDataActions:[],
      editDataBtn: false,
      editDataType: '',
      newCarNo: '',
      newSceneServeType: '',
      newSceneServeTypeName: '',
      newFieldServiceType: '',
      subLoading: false,
    }
  },
  computed: {
    fwxxCss() {
      return {
        '--padding-top': this.showTabs ? '0px' : '50px'
      }
    }
  },
  watch: {
    // 'dataSource.carNo': {
    //   handler(val) {
    //     if (val) {
    //       if(this.dataSource.isVinNum === 1){
    //         this.carLoading = true
    //         this.requestParams.codeNo = val
    //         this.loadCarData()
    //       }
    //     }
    //   },
    //   deep: true,
    // },

    'dataSource.fixCenterId': {
      handler(val) {
        if (val) {
          this.getEmpPerson()
        }
      },
      deep: true
    },

    likeWho: function(nval, oval) {
      if (this.likeWhoField == 'fixCenterId') {
        if (nval) {
          let newArr = this.fixCenterList.filter((item) => {
            return item.name.indexOf(nval) > -1
          })
          console.log(newArr)
          this.columns = newArr
        } else {
          this.columns = this.fixCenterList
        }
      }

      if (this.likeWhoField == 'serverPersonId') {
        if (nval) {
          let newArr = this.serverPersonList.filter((item) => {
            return item.name.indexOf(nval) > -1
          })
          console.log(newArr)
          this.columns = newArr
        } else {
          this.columns = this.serverPersonList
        }
      }
    }
  },
  beforeRouteEnter(to, from, next) {
    if (from.params.failBillId) {
      failId = from.params.failBillId
    }
    next()
  },
  mounted() {
    if (Object.keys(this.$route.params).length > 0) {
      // 事故登记服列表进入
      if (this.$route.params.showBillStatus) {
        this.showBillStatus = true
      }
      if (this.$route.params.showTabs) {
        this.showTabs = true
      }
      if (this.$route.params.isDetail) {
        this.isDetail = this.$route.params.isDetail !== '0'
      }
      if (this.$route.params.id && !this.isDetail) {
        this.getDetail_draft(this.$route.params.id)
        // this.dataSource.id = this.$route.query.id
      } else {
        this.getDetail(this.$route.params.id)
      }
      this.getMainFixCenter()
      if (!this.isDetail) {
        this.getAccidentOrgPsnList()
      }
    } else if (Object.keys(this.$route.query).length > 0) {
      // 新增、草稿进入
      if (this.$route.query.isDetail) {
        console.info(this.$route.query.isDetail)
        this.isDetail = this.$route.query.isDetail !== '0'
      }
      if (this.$route.query.id && !this.isDetail) {
        this.getDetail_draft(this.$route.query.id)
        // this.dataSource.id = this.$route.query.id
      } else {
        this.getDetail(this.$route.query.id)
      }
      if (!this.isDetail) {
        this.getMainFixCenter()
        this.getAccidentOrgPsnList()
      }
      this.getSceneServeType()
    } else if (failId && failId != '') {
      // 战败返回
      this.showBillStatus = true
      this.showTabs = true
      this.getDetail(failId)
      failId = ''
    } else {
      // 战败返回(系统)
      let failBillId = localStorage.getItem('failBillId')
      this.showBillStatus = true
      this.showTabs = true
      this.getDetail(failBillId)
      localStorage.setItem('failBillId', '')
    }
    this.getFieldServiceType()
  },
  destroyed() {
  },
  methods: {

    doUseCarNo() {
      if (this.dataSource.isVinNum === 1 && this.dataSource.carNo && this.dataSource.carNo != '') {
        this.carLoading = true
        this.requestParams.codeNo = this.dataSource.carNo
        this.loadCarData()
      }
    },

    doEdit() {
      // let orgPerson =this.dataSource.ogPsnName;
      // let curretPerson = JSON.parse(localStorage.getItem('userInfo'));
      // // console.log(typeof(curretPerson))
      // if (orgPerson.length>0 ){
      //   if(!orgPerson.includes(curretPerson.kdusername)){
      //     Notify({ type: "danger", message: "您不是本单的外服人员无法进行战败操作！" });
      //     return;
      //   }
      // }
      if (this.dataSource.billStatus === '保存' || this.dataSource.billStatus === '外服审核驳回') {
        this.isDetail = false
        this.getMainFixCenter()
        this.getAccidentOrgPsnList()
        this.getSceneServeType()
      } else {
        Notify({ type: 'danger', message: '当前状态不允许修改' })
      }
    },

    getCarData(data) {
      let carData = JSON.parse(JSON.stringify(data))
      this.dataSource.carId = carData.billId
      this.dataSource.vinCode = carData.vinCode
      this.dataSource.carNo = carData.carNo

      this.dataSource.customerName = carData.ctmNumName ? carData.ctmNumName : ''
      this.dataSource.customerPhone = carData.ctmNumPhone ? carData.ctmNumPhone : ''
    },

    trackFailed() {
      let orgPerson = this.dataSource.ogPsnName
      let curretPerson = JSON.parse(localStorage.getItem('userInfo'))
      // console.log(typeof(curretPerson))
      if (orgPerson.length > 0) {
        if (!orgPerson.includes(curretPerson.kdusername)) {
          Notify({ type: 'danger', message: '您不是本单的外服人员无法进行战败操作！' })
          return
        }
      }
      if (this.dataSource.billStatus == '保存' || this.dataSource.billStatus == '外服审核驳回') {
        this.$router.push({
          path: 'registerFail',
          query: {
            billId: this.dataSource.billId,
            carNo: this.dataSource.carNo
          }
        })
      } else {
        Notify({ type: 'danger', message: '当前状态无法进行战败登记' })
        return
      }
    },

    getDetail(billId) {
      outApi
        .queyCarAccidentTrackingBillById({ billId, userId: this.userId })
        .then((res) => {
          res.data.files = []
          this.dataSource = res.data
          this.dataSource.createTime = res.data.bizDate
          this.dataSource.customerPhone = res.data.mobile1
          this.dataSource.note = res.data.remark
          this.dataSource.accidentAddress = this.dataSource.accidentAddress
            ? this.dataSource.accidentAddress
            : '暂无地址信息'
          this.getFileList(billId)
        })
    },

    getFileList(billId) {
      commonApi.getFileList({ billId }).then((res) => {
        console.info('file', res)
        res.records &&
        res.records.map((item) => {
          let fileUrlObj = {
            fileUrl: `${base_url}/proxy/cam/file/download?attachId=${item.ATTID}&attachName=${item.ATTNAME}`
          }
          this.dataSource['files'].push(fileUrlObj)
        })
        console.info(this.dataSource)
      })
    },

    // 获取草稿详情
    getDetail_draft(id) {
      repairApi.getDraft({ id }).then((res) => {
        console.info(res)
        if (!res.accidentDate) {
          res.accidentDate = res.createTime
        }
        this.dataSource = res
        this.dataSource.files.forEach((item) => {
          this.urlToFile(item.fileUrl)
            .then(fileOrBlob => {
              // 这里fileOrBlob实际上是一个Blob对象，但你可以像使用File对象一样使用它
              console.log(fileOrBlob)
              // 如果你需要将其转换为FormData并上传，可以这样做：
              item.file = fileOrBlob
            })
            .catch(error => {
              console.error('Error fetching the image:', error)
            })
        })

        // 车牌号码识别
        if (this.dataSource.isCarNo === 1) {
          // this.dataSource.carNo = '浙B80PM3'
          let fileType_2 = []// 最多就2张
          for (let i = 0; i < this.dataSource.files.length; i++) {
            if (this.dataSource.files[i].fileType === 2) {
              fileType_2.push(this.dataSource.files[i].fileUrl)
            }
          }
          console.info(fileType_2.length)
          if (fileType_2.length > 0) {
            this.plateLicense(fileType_2)
          }
        }
      })
    },

    getCarAccidentExist() {
      this.loading = true
      let param = {
        codeNo: this.dataSource.carNo,
        pageNo: 1
      }
      commonApi.getCarAccidentExist(param).then((res) => {
        console.info(res)
        if (res.code == 0) {
          this.loading = false
        } else if (res.data.length > 0 && !this.dataSource.billId) {
          this.loading = false
          this.show1 = true
          console.info(res.data[0])
          this.existData = res.data[0]
        } else {
          this.dataSource.carNo = this.dataSource.carNo.replace(/\s*/g, '')
          this.dataSource.vinNo = this.dataSource.vinCode ? this.dataSource.vinCode.replace(/\s*/g, '') : ''
          console.log(this.dataSource)
          if (!this.dataSource.billId) {
            outApi.addnew({ ...this.dataSource, userId: this.userId }).then((res) => {
              console.log(res.data)
              if (res.code == 0) {
                this.loading = false
              }
              this.dataSource.billId = res.data.id
              if (this.dataSource.billId) {
                this.uploadFiles()
              }
            })
          } else {
            outApi
              .updateCarAccidentTrackingBill({
                ...this.dataSource,
                serverPersonId: this.dataSource.serverPersonId ? this.dataSource.serverPersonId : '',
                userId: this.userId
              })
              .then((res) => {
                console.log(res.data)
                if (res.code != 0) {
                  Notify({ type: 'success', message: '修改成功' })
                  this.$router.push('/registerListV2')
                }
                this.loading = false

              })
          }
        }

      }).finally(() => {
        this.subLoading = false
      })
    },

    //提交
    formOnSubmit() {
      if (!this.dataSource.fixCenterName) {
        Notify({ type: 'danger', message: '请选择维修中心' })
        return
      }
      if (!this.dataSource.carNo) {
        Notify({ type: 'danger', message: '请输入车牌号' })
        return
      }
      if (!this.dataSource.ogPsnName) {
        Notify({ type: 'danger', message: '请选择外出服人员' })
        return
      }
      if (!this.dataSource.sceneServeType) {
        Notify({ type: 'danger', message: '请选择现场服务类型' })
        return
      }
      if (this.dataSource.sceneServeType == '2') {
        if (!this.dataSource.fieldServiceTypeNum || this.dataSource.fieldServiceTypeNum == null || this.dataSource.fieldServiceTypeNum == '') {
          Notify({ type: 'danger', message: '请选择事故服务事项' })
          return
        }
        this.dataSource.fieldServeType = this.dataSource.fieldServiceTypeNum
      }
      Dialog.confirm({
        title: '提示',
        message: `确定提交事故跟踪单？`
      })
        .then(() => {
          // this.uploadFiles()
          this.subLoading = true
          if (this.dataSource.sceneServeTypeName == '事故服务') {
            this.getCarAccidentExist()
          } else {
            this.loading = true
            if (!this.dataSource.billId) {
              outApi.addnew({ ...this.dataSource, userId: this.userId }).then((res) => {
                console.log(res.data)
                if (res.code == 0) {
                  this.loading = false
                }
                this.dataSource.billId = res.data.id
                if (this.dataSource.billId) {
                  this.uploadFiles()
                }
              }).finally(() => {
                this.subLoading = false
              })
            } else {
              outApi
                .updateCarAccidentTrackingBill({
                  ...this.dataSource,
                  serverPersonId: this.dataSource.serverPersonId ? this.dataSource.serverPersonId : '',
                  userId: this.userId
                })
                .then((res) => {
                  console.log(res.data)
                  if (res.code != 0) {
                    Notify({ type: 'success', message: '修改成功' })
                    this.$router.push('/registerListV2')
                  }
                  this.loading = false

                }).finally(() => {
                  this.subLoading = false
              })
            }
          }
        })
        .catch(() => {
          this.subLoading = false
          console.log('取消')
        })
    },

    uploadFiles() {
      let formData = new FormData()
      formData.append('billId', this.dataSource.billId)
      // formData.append('billId', 'R+9KxJiNRjmxeqIxncX1fEia7UM=')
      formData.append('billType', 'CarAccidentTrackjngBill')

      if (this.dataSource.files.length > 0) {
        this.dataSource.files.forEach((item) => {
          formData.append('files', item.file)
        })
        // console.info(this.dataSource)
        commonApi.uploadFiles(formData).then((res) => {
          console.info(res)
          this.draftSave(1)
          // if(res && !res.success){
          //   Notify({ type: 'danger', message: res.errorMessage })
          // } else {
          //   this.draftSave(1)
          // }
          // if(res.success){
          //
          // }else {
          //   Notify({ type: 'danger', message: res.errorMessage })
          // }
        })

      }

    },

    draftSave(status) {
      this.dataSource.billStatus = status // 提交
      if (this.dataSource.sceneServeType == '2') {
        // if (!this.dataSource.fieldServiceTypeNum || this.dataSource.fieldServiceTypeNum == null || this.dataSource.fieldServiceTypeNum == '') {
        //   Notify({ type: 'danger', message: '请选择事故服务事项' })
        // }
      } else {
        this.dataSource.fieldServiceTypeNum = ''
      }
      repairApi.draftAddUpdate(this.dataSource).then((res) => {
        console.info('保存草稿返回：', res)
        this.loading = false
        if (res && !res.success) {
          Notify({ type: 'danger', message: res.errorMessage })
        } else {
          if (status === 1) {
            Notify({ type: 'success', message: '添加成功' })
            this.$router.replace('/registerListV2')
          } else {
            Notify({ type: 'success', message: '保存成功' })
            this.$router.replace({
              path: '/draftList'
            })
          }
        }

      })
    },

    carSure(obj) {
      this.radio2 = obj || this.radio2
      console.info(this.radio2)
      this.dataSource.carId = this.radio2.carId
      this.dataSource.vinCode = this.radio2.vinCode
      this.dataSource.customerName = this.radio2.ctmNumName
      this.dataSource.customerPhone = this.radio2.ctmNumPhone
    },

    // 照片识别车牌
    plateLicense(urls) {
      let vm = this
      vm.ocrLoading = true
      this.urlToFile(urls[0], '车牌号识别照片.png')
        .then(fileOrBlob => {
          // 这里fileOrBlob实际上是一个Blob对象，但你可以像使用File对象一样使用它
          console.log(fileOrBlob)
          // 如果你需要将其转换为FormData并上传，可以这样做：
          const formData = new FormData()
          formData.append('file', fileOrBlob)
          formData.append('multiDetect', 'true')
          // 然后使用formData进行上传...
          commonApi.plateLicense(formData).then((el) => {
            vm.ocrLoading = false
            console.log(el)
            if (el && el.words_result && el.words_result.length > 0) {
              // 多个车牌号
              if (el.words_result.length > 0) {
                let list = []
                el.words_result.forEach((item, index) => {
                  list.push({
                    color: item.color,
                    carNo: item.number
                  })
                })
                vm.carNoList = list
                this.show2 = true
              }
              // else {
              //   // 单个车牌号
              //   vm.dataSource.carNo = el.words_result[0].number
              //   if(vm.dataSource.isVinNum === 1){
              //     vm.carLoading = true
              //     vm.requestParams.codeNo = vm.dataSource.carNo
              //     this.loadCarData()
              //   }
              // }
            } else {
              Notify({ type: 'danger', message: '未识别到车牌信息' })
              if (urls.length > 1) {
                vm.plateLicense([urls[1]])
              }
            }
          })
        })
        .catch(error => {
          console.error('Error fetching the image:', error)
        })
    },

    // 获取车辆信息列表
    loadCarData() {
      carApi
        .getCarInfoList({ ...this.requestParams })
        .then((res) => {
          this.carLoading = false
          this.car_recordList = res.data
          if (this.car_recordList.length > 0) {
            this.show3 = true
          }
            // else if(this.car_recordList.length == 1) {
            //   this.carSure(this.car_recordList[0])
          // }
          else {
            Notify({ type: 'danger', message: '该车牌未在系统中查找到对应车辆信息' })
          }
        })
        .catch((res) => {
          this.carLoading = false
        })
    },

    // 获取维修中心
    getMainFixCenter() {
      commonApi
        .getMainFixCenter({
          userId: this.userId,
          type: 'fixCenter'
        })
        .then((res) => {
          if (res.data) {
            this.fixCenterList = res.data
            // this.fixCenterList.forEach((item) => {
            //   if (localStorage.getItem('orgId') == item.billId) {
            //     this.dataSource.fixCenterId = item.billId
            //     this.dataSource.fixCenterName = item.name
            //   }
            // })
          }
        })
    },

    // 外服人员
    getAccidentOrgPsnList() {
      outApi.getAccidentOrgPsnList({}).then((res) => {
        if (res.data) {
          if (!this.dataSource.ogPsnName || this.dataSource.ogPsnName == null || this.dataSource.ogPsnName == '') {
            let userName = this.userInfo.kdusername
            if (!localStorage.getItem('reBillId')) {
              res.data &&
              res.data.forEach((item) => {
                if (item.name == userName) {
                  this.dataSource.ogPsnName = item.name
                  this.dataSource.ogPsnId = item.billId
                }
              })
            }
          }


          this.empList = res.data
        }
      })
    },

    // 获取服务人员
    getEmpPerson() {
      commonApi
        .getEmpPerson({
          fixCenterId: this.dataSource.fixCenterId,
          type: 'taskFollow'
        })
        .then((res) => {
          if (res.data) {
            this.serverPersonList = res.data
          }
        })
    },

    // 重新通过维修中心筛选出对应的数据
    filterFixCenterData() {
      let fixCenterData = getFilterData(this.fixCenterList, 'billId', this.dataSource.fixCenterId)
      this.field = 'fixCenterId'
      this.fieldName = 'fixCenterName'
      this.handleSelectConfirm(fixCenterData)
    },

    // 多选确认
    multipleSubmit(data) {
      if (data && data.length != 0) {
        this.dataSource.ogPsnName = data.map((item) => item.name).join(',')
        this.dataSource.ogPsnId = data.map((item) => item.billId).join(',')
      } else {
        this.dataSource.ogPsnName = ''
        this.dataSource.ogPsnId = ''
      }
    },

    // 选择下拉确认
    handleSelectConfirm(value, index) {
      this.dataSource[this.field] = value ? value.billId : ''
      this.dataSource[this.fieldName] = value ? value.name : ''
      if (this.field == 'fixCenterId') {
        this.getEmpPerson()
      }
      this.showSelectPicker = false
      this.likeWho = ''
    },

    // 选择下拉确认
    handleSelectConfirm1(value, index) {
      let params = {
        billId: this.dataSource.billId,
        operateType: 1,
        repairId: value.billId
      }
      outApi.editCarResetFollowUp(params).then(res => {
        if (res.code == 1) {
          Notify({ type: 'success', message: '入场门店修改成功' })
          this.dataSource[this.field] = value ? value.billId : ''
          this.dataSource[this.fieldName] = value ? value.name : ''
        }
      })
      this.showSelectPicker1 = false
      this.likeWho = ''
    },


    // 选择下拉
    handleSelect(field, fieldName) {
      if (this.isDetail) {
        return
      }
      this.showSelectPicker = true
      if (field == 'isRepaired') {
        this.columns = [
          { name: '是', billId: 1 },
          { name: '否', billId: 2 }
        ]
      } else if (field == 'fixCenterId') {
        this.columns = this.fixCenterList
      } else if (field == 'depOrgId') {
        this.columns = this.brandList
      } else if (field == 'repairInsCmpId') {
        this.columns = this.insureList
      } else if (field == 'serverPersonId') {
        this.columns = this.serverPersonList
      }
      this.field = field
      this.fieldName = fieldName
      this.likeWhoField = field
    },

    // 选择下拉
    handleSelect1(field, fieldName) {

      this.showSelectPicker1 = true
      this.columns = this.fixCenterList
      this.field = field
      this.fieldName = fieldName
      this.likeWhoField = field
    },

    // 图片预览
    preImg(url) {
      let arr = [url]

      ImagePreview({
        images: arr,
        showIndex: true,
        loop: false
      })
    },

    onConfirm(val, field) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      // let second = val.getSeconds()
      if (month >= 1 && month <= 9) {
        month = `0${month}`
      }
      if (day >= 1 && day <= 9) {
        day = `0${day}`
      }
      if (hour >= 0 && hour <= 9) {
        hour = `0${hour}`
      }
      if (minute >= 0 && minute <= 9) {
        minute = `0${minute}`
      }
      // if (second >= 0 && second <= 9) { second = `0${second}` }
      this.dataSource[field] = `${year}-${month}-${day} ${hour}:${minute}:00`
      this.showTimerPicker = false
    },

    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      } else if (type === 'second') {
        return `${value}秒`
      }
      return value
    },

    onClickLeft() {
      if (this.isDetail) {
        this.$router.go(-1)
      } else {
        this.$dialog.alert({
          message: '当前页面数据未保存，退出将清空当前数据，确认退出？',
          showCancelButton: true,
          confirmButtonColor: '#3975C6'
        })
          .then(() => {
            this.$router.go(-1)
          })
          .catch(() => {
            // on cancel
          })
      }
    },
    onClickRight() {
      console.info('点击保存草稿')
      this.draftSave(0)
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },

    async urlToBlob(url) {
      const response = await fetch(url)
      const blob = await response.blob()
      return blob
    },

    async urlToFile(url, filename = 'default.png') {
      const blob = await this.urlToBlob(url)
      // 注意：这里返回的不是真正的File对象，而是一个具有类似行为的Blob对象
      return new File([blob], filename, { type: blob.type }) // 在某些浏览器中可能无法正常工作
      // 或者，你可以直接使用blob，因为在很多情况下，它可以像File对象一样使用
      // return blob;
    },

    handleTel(tel) {
      if (isPhone()) {
        window.location.href = `tel:${tel}`
      } else {
        Toast('请在手机端使用此功能')
      }
    },
    onTabClick(name, title) {
      if (title == '跟进记录') {
        this.showHistory = true
        this.getFollowUpRecord()
      } else {
        this.showHistory = false
      }
    },
    getFieldVal(field, value) {
      console.log(field, value)
      this.followForm[field] = value
    },
    configFollowForm() {
      this.followForm.carAccTrackId = this.dataSource.billId
      if (this.followForm.followUpRemark == '') {
        Notify({ type: 'warning', message: '跟进备注不能为空' })
        return
      }
      console.log('新增跟进记录---->', this.followForm)
      outApi.addFollowUpRecord(this.followForm).then(res => {
        console.log('新增跟进记录---->', res)
        if (res.code == 1) {
          Notify({ type: 'success', message: '跟进信息登记成功' })
          this.show4 = false
          this.followOnRefresh()
        } else {
          Notify({ type: 'danger', message: res.err })
        }
      })
    },
    openFollow() {
      this.show4 = true
      this.followForm.followUpDate = new Date().Format('yyyy-MM-dd hh:mm:ss')
      this.followForm.followUpRemark = ''
    },
    // 历史跟进数据刷新
    followOnRefresh() {
      // 清空列表数据
      this.followHistoryList = []
      this.followFinished = false
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.followRefreshing = false
      this.getFollowUpRecord()
    },
    //  获取历史跟进
    getFollowUpRecord() {
      if (this.followFinished) return
      this.followLoading = true
      this.followFinished = true
      outApi
        .getFollowUpRecord({ carAccTrackId: this.dataSource.billId })
        .then(res => {
          this.followHistoryList = res.data || []
        })
        .catch(res => {
          this.followLoading = false
          this.followFinished = false
        })
    },
    clickRecord() {
      this.recordBox = true
    },
    // 获取录音转文字
    getWords(data) {
      this.followForm.followUpRemark = data
    },
    // 关闭录音弹窗
    closeRecord(data) {
      this.recordBox = data
    },
    getSceneServeType() {
      this.sceneServeTypeList = []
      commonApi
        .getEnums({
          key: 'sceneServeType',
          userId: this.requestParams.userId,
        })
        .then((res) => {
          if (res.data) {
            this.sceneServeTypeList = res.data
            if (!this.dataSource.sceneServeType || !this.dataSource.sceneServeTypeName) {
              let type = res.data.find(item => item.name == '事故服务')
              this.dataSource.sceneServeType = type.value
              this.dataSource.sceneServeTypeName = type.name
            }
          }
        })
    },
    getSceneServeTypeList() {
      this.sceneServeTypeList = []
      commonApi
        .getEnums({
          key: 'sceneServeType',
          userId: this.requestParams.userId,
        })
        .then((res) => {
          if (res.data) {
            this.sceneServeTypeList = res.data
          }
        })
    },
    onConfirmSceneServeType(record) {
      if (this.editSceneServeTypeFlag == 'new') {
        this.newSceneServeType = record.value
        this.newSceneServeTypeName = record.name
        this.editSceneServeTypeFlag = ''
      } else {
        this.dataSource.sceneServeType = record.value
        this.dataSource.sceneServeTypeName = record.name
      }

      this.showSceneServeType = false
    },
    sceneServeApprove(billId) {
      outApi.sceneServeApprove({billId: billId}).then(res => {
        if (res.code != 0) {
          Notify({ type: 'success', message: '提交成功' })
          this.$router.push('/registerListV2')
        }
      })
    },
    editCarResetFollowUp(billId, operateType) {
      let params = {
        billId: billId,
        operateType: operateType,
      }
      outApi.editCarResetFollowUp(params).then(res => {
        if (res.code != 0) {
          Notify({ type: 'success', message: '重启跟进成功' })
          this.getDetail(billId)
        }
      })
    },
    editOrg() {
      Dialog.confirm({
        title: '修改入场门店',
        message: '确定修改该现场服务登记的入场门店?'
      }).then(()=>{
        this.handleSelect1('fixCenterId', 'fixCenterName')
      })

    },
    restartFollowUp(billId) {
      Dialog.confirm({
        title: '重启跟进',
        message: '确定重启跟进?'
      }).then(()=>{
        this.editCarResetFollowUp(billId, 0)
      })

    },
    getFieldServiceType() {
      this.fieldServiceTypeArray = []
      commonApi
        .getEnums({
          key: 'fieldServiceType',
          userId: this.requestParams.userId,
        })
        .then((res) => {
          if (res.data) {
            this.fieldServiceTypeArray = res.data
          }
        })
    },
    onOpenActionSheet() {
      this.showEditDataFlag = true
      this.editDataActions = []
      let action = this.actions
      if (this.dataSource.createdRepair == 1 || this.noEditInterShop.includes(this.dataSource.billStatus)) {
        // action = action.filter(item => item.name != '修改进场门店')
        action.forEach(item => {
          if (item.name == '修改进场门店') {
            item.disabled = true
          }
        })
      }
      if (this.dataSource.billStatus != '战败') {
        // action = action.filter(item => item.name != '重启跟进')
        action.forEach(item => {
          if (item.name == '重启跟进') {
            item.disabled = true
          }
        })
      } else {
        action.forEach(item => {
          if (item.name == '重启跟进') {
            item.color = '#ee0a24'
          }
        })
      }
       this.editDataActions = action
    },
    onSelectBtnToEditData(item) {
      switch (item.name) {
        case '修改车牌号码':
          this.editDataType = 'carNo'
          this.newCarNo = ''
          this.editDataBtn = true
          break
        case '修改服务类型':
          this.editDataType = 'sceneServe'
          this.editDataBtn = true
          this.newFieldServiceType = ''
          this.newSceneServeType = ''
          this.getSceneServeTypeList()
          break
        case '修改进场门店':
          this.editOrg()
          break
        case '重启跟进':
          this.restartFollowUp(this.dataSource.billId)
          break
      }
    },
    configEditData(){
      switch (this.editDataType) {
        case 'carNo':
          this.editCarNo()
          break
        case'sceneServe':
          this.editSceneServe()
          break
      }
      this.editDataBtn = false
      this.editDataType = ''
    },
    editCarNo() {
      let param = {
        billId: this.dataSource.billId,
        carNo: this.newCarNo
      }
      outApi.updateFieldServiceCarNo(param).then(res => {
        if (res.code != 0) {
          Notify({ type: 'success', message: '修改成功' })
          this.getDetail(this.dataSource.billId)
        }
      })
    },
    editSceneServe()  {
      let param = {
        billId: this.dataSource.billId,
        sceneServeType: this.newSceneServeType,
        fieldServeType: this.newFieldServiceType
      }
      outApi.updateFieldServiceType(param).then(res => {
        if (res.code != 0) {
          Notify({ type: 'success', message: '修改成功' })
          this.getDetail(this.dataSource.billId)
        }
      })
    }
  }
}


</script>

<style lang="less" scoped>
.registerEdit {
  //width: 100%;
  height: 100%;
  //background-color: rgba(245,245,250,1);

  .fwxx {
    padding-top: var(--padding-top);
  }

  .sceneServeItem {
    margin: 0 15px 5px 0;

    /deep/ .van-radio__label {
      margin-left: 0;
    }
  }
  .redLabel {
    /deep/ .van-field__label {
      color: #e00d0d;
      font-size: 17px;
    }
  }


  .top_title {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    height: 50px;
    background: url(../../assets/images/title_bg.png) no-repeat;
    background-size: 100%;
    background-attachment: fixed;

    .top_title_back {
      position: absolute;
      left: 10px;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
    }

    .top_title_val {
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
    }

    .top_title_right {
      position: absolute;
      right: 10px;
      top: 0;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
    }
  }

  .formData {
    //margin-top: 50px;
    //height: 105%;
    //padding-top: 50px;
    height: calc(100% - 125px);
    overflow-y: auto;
    background-color: #f5f5fa;
    padding-bottom: 15px;
  }

  /deep/ .van-grid-item__content {
    background-color: transparent;
  }

  /deep/ .van-grid-item {
    flex-basis: 0 !important;
  }

  /deep/ .van-field__label {
    color: #000000;
    font-size: 17px;
  }

  /deep/ .van-field__control {
    color: #000000 !important;
    font-size: 17px;
  }

  /deep/ .van-cell::after {
    right: 0;
    left: 0;
  }

  .addBtn {
    //position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1;
    //text-align: center;
    background-color: white;
    height: 60px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 10px;

    button {
      width: 159px;
      height: 42px;
      font-size: 20px;
    }

    //button+button {
    //  margin-left: 16px;
    //}
  }

  /deep/ .van-dialog__header {
    color: #E51C23;
  }

  /deep/ .van-dialog__message {
    font-size: 16px;
  }

  .dialogBody {
    padding: 15px 17px;

    .messDiv {
      line-height: 22px;
      font-size: 17px;
    }

    .messDiv + .messDiv {
      margin-top: 6px;
    }

    .warning {
      color: #E51C23;
    }

    .icon-tel {
      color: #fff;
      background: #35bc04;
      font-size: .32rem;
      padding: 0.1rem;
      border-radius: 50%;
      margin-left: 0.25rem;
    }

    .carNo {
      background-color: #005efc;
      //padding: 1px 18px;
      color: white;
      font-size: 28px;
      line-height: 39px;
      margin-left: 25px;
      border: 1px solid rgba(187, 187, 187, 1);
      width: 170px;
      text-align: center;
    }

    /deep/ .van-radio-group {
      margin: 16px 0;
      padding: 0 30px;

      .van-radio + .van-radio {
        margin-top: 16px;
      }
    }
  }

  .followInfo {
    //position: fixed;
    //height: 100%;
    width: 100%;
    overflow: auto;
    left: 0;
    z-index: 102;
    //box-shadow: 0px 1px 0px 0px rgba(40, 47, 56, 0.04);
    //border-radius: 10px 10px 0px 0px;
    background: #fff;

    &::-webkit-scrollbar {
      display: none;
    }

    .followInfobox {
      border-radius: 10px 10px 0px 0px;
      //position: fixed;
      //top: 116px;
      left: 0;
      width: 100%;
      background: #fff;
    }

    .followInfo_title {
      text-align: center;
      padding: 10px;
      border-bottom: 1px solid #f2f2f2;
      font-weight: 600;
      font-size: 17px;
      color: #1d2129;
    }

    .followInfo_content {
      padding: 10px;

      .followInfo_item {
        margin-bottom: 10px;
      }

      .followInfo_item_time {
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f4f4f6;
        padding: 8px 17px 20px 17px;
        margin-bottom: 10px;

        .card_label {
          display: flex;
          margin-bottom: 10px;

          .require_icon {
            font-weight: 400;
            font-size: 12px;
            color: #ff4848;
          }

          .label_txt {
            font-weight: 400;
            font-size: 14px;
            color: #86909c;
          }
        }

        .card_select {
          display: flex;
          flex-wrap: wrap;

          .select_time {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time_val {
              font-weight: 700;
              font-size: 14px;
              color: #2f2f2f;
            }
          }
        }
      }

      .followInfo_item_note {
        margin-bottom: 10px;
        ///deep/ .text_val {
        //  height: 100%;
        //}
      }

      .followInfo_name {
        margin-bottom: 10px;

        .name {
          width: 115px;
          padding: 5px 8px;
          font-weight: 700;
          font-size: 14px;
          color: #165dff;
          background: #e8f5ff;
          border-radius: 2px 2px 2px 2px;
        }
      }
    }

    .voice_div {
      .radiobox {
        box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.02);
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #f4f4f6;
        padding: 8px 17px 20px 17px;

        .card_label {
          display: flex;
          margin-bottom: 10px;

          .require_icon {
            font-weight: 400;
            font-size: 12px;
            color: #ff4848;
          }

          .label_txt {
            font-weight: 400;
            font-size: 14px;
            width: 100%;
            color: #86909c;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .voice_icon {
              font-weight: 400;
              font-size: 12px;
              display: flex;
              align-items: center;
              color: #165dff;

              .voice_icon_img {
                width: 12px;
              }
            }
          }
        }

        .card_select {
          display: flex;
          flex-wrap: wrap;

          .radio_item {
            width: 33%;
            display: flex;
            align-items: center;

            .item_icon {
              width: 18px;
              display: block;
              margin-right: 10px;
            }

            .item_name {
              font-weight: 600;
              font-size: 12px;
              color: #2f2f2f;
            }
          }

          .select_time {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .time_val {
              font-weight: 700;
              font-size: 12px;
              color: #2f2f2f;
            }

            .icon-right {
              font-size: 16px;
              color: #c9cdd4;
            }

            .text_val {
              width: 100%;
              background: #f2f3f5;
              border: none;
              font-weight: 300;
              font-size: 14px;
              color: #333;
              display: block;
              padding: 8px 10px;

              &::placeholder {
                color: #c9cdd4;
              }
            }
          }

          .fast_select {
            display: flex;
            flex-wrap: wrap;
            padding-top: 20px;

            .fast_select_item {
              color: #666;
              padding: 5px 10px;
              margin-right: 10px;
              font-size: 12px;
              color: #4e5969;
              border-radius: 32px 32px 32px 32px;
              background: #f7f7f7;
              margin-bottom: 10px;

              &.active {
                color: #165dff;
                background: #d8e3ff;
              }
            }
          }
        }
      }
    }
  }

  /deep/ .van-tab--active {
    color: #F8F8F8;
    font-weight: 700;
  }

  /deep/ .van-tab {
    color: #F8F8F8;
    font-weight: 700;
  }

  .followListbox {
    height: calc(100vh - 120px);
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    .followInfo_content {
      .followInfo_item {
        padding: 10px 0px 10px 20px;

        .followInfo_top {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          .followInfo_circle {
            background: #f2f2f2;
            border-radius: 50%;
            width: 9px;
            height: 9px;
            margin-right: 10px;
          }

          .followInfo_name {
            font-weight: 700;
            font-size: 14px;
            color: #86909c;
          }
        }

        .followInfo_box {
          display: flex;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;

          .followInfo_linebox {
            width: 1px;
            position: relative;
            -ms-flex-item-align: stretch;
            align-self: stretch;
            background: #f2f2f2;
            margin: 0 10px 0 4px;
          }

          .followInfo_val {
            width: 100%;
            padding: 12px 16px;
            background: #f9fafc;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #fbfcfe;
            flex: 1;

            .followInfo_val_item {
              display: flex;
              justify-content: space-between;
              margin-bottom: 10px;
              align-items: center;

              .item_label {
                font-weight: 400;
                font-size: 14px;
                color: #86909c;
              }

              .item_val {
                font-weight: 700;
                font-size: 14px;
                color: #2f2f2f;
              }
            }

            .followInfo_val_item2 {
              .item_label {
                font-weight: 400;
                font-size: 14px;
                color: #86909c;
                margin-bottom: 10px;
              }

              .item_val {
                font-weight: 400;
                font-size: 16px;
                color: #86909c;
                background: #f2f3f5;
                padding: 5px 6px;
              }
            }
          }
        }

        &.active {
          .followInfo_top {
            .followInfo_circle {
              background: #165dff;
            }

            .followInfo_name {
              color: #165dff;
            }
          }

          .followInfo_box {
            .followInfo_linebox {
              background: #165dff;
            }
          }
        }
      }
    }

    .no_icon {
      padding: 25px;

      .no_icon_img {
        width: 70px;
        display: block;
        margin: auto;
      }

      .no_icon_txt {
        font-weight: 400;
        font-size: 14px;
        color: #86909c;
        text-align: center;
        margin-top: 10px;
      }
    }

    .pt80 {
      padding-top: 80px;
    }
  }
}
</style>
